<template>
  <div class="mv-container">
    <!-- 返回按钮 -->
    <div class="back-arrow" @click="$router.push('/')">
      <el-icon><ArrowLeft /></el-icon>
      <span>返回</span>
    </div>

    <!-- MV标题和作者 -->
    <div class="mv-info">
      <h1 class="mv-title">{{ mvData.title }}</h1>
      <p class="mv-artist">{{ mvData.artist }}</p>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-content">
        <el-icon class="loading-icon"><Loading /></el-icon>
        <span>加载中...</span>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-overlay">
      <div class="error-content">
        <el-icon><Warning /></el-icon>
        <div class="error-message">{{ error }}</div>
        <el-button type="danger" @click="retry">重试</el-button>
      </div>
    </div>

    <!-- 视频容器 -->
    <div v-else class="video-wrapper">
      <video
        v-if="mvData.file_path"
        ref="videoPlayer"
        controls
        class="mv-video"
        @error="handleVideoError"
      >
        <source :src="videoSrc" :type="videoType" />
        您的浏览器不支持 video 标签
      </video>
      <div v-else class="no-video">
        <el-icon><VideoPause /></el-icon>
        <span>视频不可用</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import {
  ArrowLeft,
  VideoPause,
  Warning,
  Loading,
} from "@element-plus/icons-vue";
const route = useRoute();
const videoPlayer = ref(null);

// 响应式状态
const mvData = ref({
  title: "",
  artist: "",
  file_path: "",
});
const loading = ref(true);
const error = ref(null);

// 计算属性
const videoSrc = computed(() => {
  if (!mvData.value.file_path) return "";
  // 使用encodeURIComponent处理特殊字符
  return `http://localhost:3001/api/mv/${encodeURIComponent(
    mvData.value.file_path
  )}`;
});

const videoType = computed(() => {
  const ext = mvData.value.file_path?.split(".").pop() || "mp4";
  return `video/${ext === "mov" ? "quicktime" : ext}`;
});

// 方法
const fetchData = async () => {
  try {
    loading.value = true;
    error.value = null;

    const response = await axios.get(
      `http://localhost:3001/api/mvlist/${route.params.id}`
    );
    if (!response.data) {
      throw new Error("无效的响应数据");
    }

    mvData.value.file_path = response.data.file_path;
    mvData.value.title = response.data.mvtitle;
    mvData.value.artist = response.data.mvauthor;
    console.log("MV数据:", response.data);

    // 检查文件路径
    if (!mvData.value.file_path) {
      console.warn("MV数据缺少文件路径:", response.data);
    }
  } catch (err) {
    error.value = err.response?.data?.error || err.message;
    console.error("获取MV数据失败:", err);
  } finally {
    loading.value = false;
  }
};

const retry = () => {
  fetchData();
};

const handleVideoError = (e) => {
  console.error("视频播放错误:", e);
  if (videoPlayer.value) {
    const errorCode = videoPlayer.value.error;
    const errorMap = {
      1: "视频加载中止",
      2: "网络错误",
      3: "解码错误",
      4: "视频不支持",
    };
    error.value = errorMap[errorCode] || "未知视频错误";
  }
};

// 生命周期
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
$primary-color: #ff4d4f;
$dark-bg: #1a1a1a;
$text-primary: #ffffff;

.mv-container {
  height: 100vh;
  background: linear-gradient(45deg, #0a0a0a 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
}

.back-arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  color: $text-primary;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 0.3s;

  &:hover {
    background: rgba($primary-color, 0.2);
    color: $primary-color;
    transform: translateX(-5px);
  }

  .el-icon {
    font-size: 1.4rem;
  }

  span {
    font-size: 1.1rem;
    font-weight: 500;
  }
}

.mv-info {
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  z-index: 90;
  color: $text-primary;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);

  .mv-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin-top: -60px;
  }

  .mv-artist {
    font-size: 1.1rem;
    color: rgba($text-primary, 0.8);
    margin-top: 10px;
    text-align: center;
  }
}

.loading-overlay,
.error-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 99;
}

.loading-content {
  text-align: center;
  color: $text-primary;

  .loading-icon {
    font-size: 3rem;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
    color: $primary-color;
  }

  span {
    display: block;
    font-size: 1.2rem;
  }
}

.error-content {
  text-align: center;
  color: $primary-color;
  max-width: 400px;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 12px;

  .el-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .error-message {
    margin: 1rem 0;
    font-size: 1.1rem;
    color: $text-primary;
  }
}

.video-wrapper {
  height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 20px 20px;

  .mv-video {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  }
}

.no-video {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: $primary-color;
  gap: 1rem;

  .el-icon {
    font-size: 3rem;
  }

  span {
    font-size: 1.2rem;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
